<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-23 15:02:32
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\basic\uiForm\uiForm.vue
 * CIMC-V2
-->
<template>
  <div
    :id="hasPreview ? info._id : `diy_${info._id}`"
    ref="chart"
    v-ui-ref="vSetRef"
    class="ui-line-chart h-full"
    :style="{
      width: '100%',
    }"
  ></div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  import cloneDeep from 'lodash/cloneDeep'
  import * as echarts from 'echarts'
  export default defineComponent({
    name: 'UiCode',
    components: {},
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        infoComponent: {},
        designByUser: [],
        inter: null,
      }
    },
    watch: {
      'info.extension': {
        handler() {
          this.$nextTick(() => {
            this.infoComponent = cloneDeep(this.info)
            this.getRequestData()
            this.inter && (clearInterval(this.inter), (this.inter = null))
            if (this.info.extension.requestSet.value.loopRequest) {
              this.inter = setInterval(() => {
                this.getRequestData()
              }, this.info.extension.requestSet.value.loopTime)
            }
            // this.initChart()
          })
        },
        deep: true,
      },
    },
    created() {
      this.infoComponent = cloneDeep(this.info)
    },
    mounted() {
      if (this.info.extension.firstGetData?.value === false) {
        return
      }
      if (!window.echarts) {
        window.echarts = echarts
      }
      this.$nextTick(() => {
        this.getRequestData()
        if (this.info.extension.requestSet.value.loopRequest) {
          this.inter = setInterval(() => {
            this.getRequestData()
          }, this.info.extension.requestSet.value.loopTime)
        } else {
          this.inter && (clearInterval(this.inter), (this.inter = null))
        }
      })
    },
    deactivated() {
      console.warn('退出----------------------')
      this.inter && clearInterval(this.inter)
    },
    beforeUnmount() {
      this.inter && clearInterval(this.inter)
    },
    methods: {
      getRequestData() {
        let obj = {}
        this.$request(this.infoComponent.extension.requestSet.value, (res) => {
          this.infoComponent.extension.requestSet.value['resList'].map((item) => {
            obj[item.id] = this.$getResponseData(res, item)
          })
          // console.log(obj)
          this.initChart(obj)
        })
      },
      initChart() {
        // let dataObj = cloneDeep(obj)
        let chartDom = this.$refs.chart
        let myChart = echarts.init(chartDom)
        try {
          const val = new Function(`${this.info.extension.codeDesign.value} ;return option`)
          const op = val()
          console.log(op)
          op && myChart.setOption(op, true)
        } catch (error) {
          console.log(error)
        }
        let resizeObserver = new ResizeObserver(() => {
          myChart.resize()
        })
        resizeObserver.observe(this.$refs.chart)
      },
    },
  })
</script>
<style lang="scss">
  .uiCode {
    width: 100%;
    height: 100%;
  }
</style>
